<template>
  <div class='tags-container'>
    <el-card>

      <!-- 面包屑 -->
      <div slot="header" v-if="isShow">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 卡片头部 -->
      <card-header :elColSpan="[18,6]">
        <template #left>
          <!-- form搜索框 -->
          <el-form ref="tagsForm" :model="tagsForm" size="small" :inline="true" label-width="80px">
            <el-form-item label="标签名称" prop="tagName">
              <el-input v-model="tagsForm.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="tagsForm.state" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="onReset">清除</el-button>
              <el-button type="primary" size="small" @click="loadTagsList">搜索</el-button>
            </el-form-item>
          </el-form>
        </template>
        <template #right>
          <!-- 返回按钮 -->
          <el-button
            v-if="isShow"
            type="text"
            icon="el-icon-back"
            @click="$router.back()"
          >返回学科</el-button>
          <!-- 添加按钮 -->
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="onAdd"
          >
            新增标签
          </el-button>
        </template>
      </card-header>

      <!-- 数据条数，消息提示 -->
       <el-alert style="margin-bottom: 15px" :title="`数据一共 ${total} 条`" type="info" :closable="false" show-icon/>

       <!-- 表格 -->
        <el-table
          :data="tagsList"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科">
          </el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者">
          </el-table-column>
          <el-table-column
            label="创建日期">
              <template slot-scope="{row}">
                {{row.addDate | parseTimeByString}}
              </template>
          </el-table-column>
          <el-table-column
            label="状态">
              <template slot-scope="{row}">
                {{row.state ? '已启用' : '已禁用'}}
              </template>
          </el-table-column>
          <el-table-column
            prop="creatorID"
            label="操作"
            width="150">
              <template  slot-scope="{row}">
                <el-button type="text" @click="changeState(row.id,row.state ? 0 : 1)">{{row.state ? '禁用' : '启用'}}</el-button>
                <el-button type="text" :disabled="!!row.state" @click="onEdit(row)">修改</el-button>
                <el-button type="text" :disabled="!!row.state" @click="onDelete(row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :counts="total"
          :page="{page: 1,pagesize: 10}"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
    </el-card>

    <!-- 标签添加编辑弹层 -->
    <tags-add
      ref="tagsAdd"
      :text="text"
      pageTitle="标签"
      :subjects="subjects"
      :isShow="!isShow"
      @success="loadTagsList"
    />

  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
import { status } from '@/api/hmmm/constants.js'
import tagsAdd from '../components/tags-add.vue'
export default {
  components: { tagsAdd },
  data () {
    return {
      tagsForm: {
        page: 1,
        pagesize: 10,
        subjectID: '',
        tagName: '',
        state: ''
      },
      total: 0,
      tagsList: [],
      text: '',
      subjects: []
    }
  },
  created () {
    if (this.isShow) {
      this.tagsForm.subjectID = this.$route.query.id - 0
    }
    this.loadTagsList()
    this.loadSimpleData()
  },
  computed: {
    status: () => status,
    isShow () { return !!Object.keys(this.$route.query).length }
  },
  methods: {
    // 加载标签简单列表(所属学科)
    async loadSimpleData () {
      const { data } = await simple()
      this.subjects = data
    },
    // 加载标签列表数据
    async loadTagsList () {
      // 数据过滤
      const newObj = {}
      Object.keys(this.tagsForm).forEach(item => {
        if (this.tagsForm[item] !== '') newObj[item] = this.tagsForm[item]
      })
      const { data } = await list(newObj)
      this.total = data.counts
      this.tagsList = data.items
    },
    // 每页数量改变
    changePageSize (val) {
      this.tagsForm.pagesize = val
      this.loadTagsList()
    },
    // 当前页码改变
    changeCurrentPage (val) {
      this.tagsForm.page = val
      this.loadTagsList()
    },
    // 头部表单重置
    onReset () {
      this.$refs.tagsForm.resetFields()
    },
    // 状态改变
    async changeState (id, state) {
      await changeState({ id, state })
      this.$message.success('操作成功')
      this.loadTagsList()
    },
    // 点击添加
    onAdd () {
      this.text = '新增'
      this.$refs.tagsAdd.dialogFormV(this.isShow ? this.tagsForm : false)
    },
    // 点击修改
    onEdit (row) {
      this.text = '修改'
      this.$refs.tagsAdd.dialogFormV(row)
      console.log(row)
    },
    // 点击删除
    onDelete (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.loadTagsList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.el-table th.is-leaf {
    border-bottom: 2px solid #e8e8e8;
}
/deep/.el-table th {
    background-color: #fafafa;
}
</style>
